<template>
  <div class="warning-wrapper e-interact">
  <!--
      <van-row type="flex" justify="center" class="emsg-num" >
        <van-col span="8" >未回复消息({{noReplyCount}}条)</van-col>
        <van-col span="8">已回复消息({{replyCount}}条)</van-col>
      </van-row>
-->
 
      <van-tabs v-model="active" @change="changeTab">
        <van-tab title="待回复" class="recent-ques">
          <template v-if="noReplyCount > 0">
            <van-list
              v-model="quesLoading"
              :finished="quesFinished"
              finished-text=""
              @load="loadQues"
            >
              <van-cell v-for="(item, index) in quesList" :key="'que' + index" class="msg-list-item">
                <van-row class="msg-person" type="flex" justify="space-between" align="center">
                  <van-col span="13" class="msg-name">
                    <img class="msg-name-avatar" :src="item.avatar">{{item.user_name}}
                  </van-col>
                  <van-col span="6" offset="5" style="text-align:right;">
                    <div class="warning-item-time">{{item.question_time}}</div>
                  </van-col>
                </van-row>
                <van-row class="msg-ask-item">
                  <span class="msg-ask-first">问</span>
                  <span class="msg-ask">{{item.question_content}}</span>
                </van-row>
              </van-cell>
            </van-list>
          </template>
          <!--待回复=0且已回复>0 显示回复投资者问题非常及时哦-->
          <div v-if="replyCount > 0 && noReplyCount == 0" class="no-interact-info">
            <img class="no-data" :src="require('@/assets/hasReply@2x.png')"/>
          </div>
      
          <div v-if="replyCount == 0 && noReplyCount == 0" class="no-interact-info">
            <img class="no-data" :src="require('@/assets/noInteract@2x.png')"/>
          </div>
          <!--
          <van-cell class="msg-list-item">
            <van-row class="msg-person" type="flex" justify="space-between" align="center">
              <van-col span="13" class="msg-name">
                <span class="msg-name-avatar"></span>陈燕
              </van-col>
              <van-col span="6" offset="5" style="text-align:right;">
                <div class="warning-item-time">2018-09-04</div>
              </van-col>
            </van-row>
            <van-row class="msg-ask-item">
              <span class="msg-ask-first">问</span>
              <span class="msg-ask">公司投资对普洛斯以及其它一些投资是怎么体现在公司对财务报表的，公司是通过什么方式持有这些投资股份的，谢谢解答。</span>
            </van-row>
          </van-cell>
          -->
          
        </van-tab>
        <van-tab title="已回复">
          <template v-if="replyCount > 0">
            <van-list
              v-model="replyLoading"
              :finished="replyFinished"
              finished-text=""
              @load="loadReply"
            >
              <van-cell class="msg-list-item" v-for="(item, index) in replyList" :key="'que' + index">
                <van-row class="msg-person" type="flex" justify="space-between" align="center">
                  <van-col span="10" class="msg-name">
                    <img :src="item.avatar" class="msg-name-avatar"/>{{item.user_name}}
                  </van-col>
                  <van-col span="6" offset="5" style="text-align:right;">
                    <div class="warning-item-time">{{item.question_time}}</div>
                  </van-col>
                </van-row>
                <van-row class="msg-ask-item">
                  <span class="msg-ask-first">问</span>
                  <span class="msg-ask">{{item.question_content}}</span>
                </van-row>
                <van-row class="msg-answer-item">
                  <div class="triangle-up"></div>
                  <div class="msg-content">
                    <div class="msg-answer-item senti-item answer-line">
                      <div class="msg-answer-item-content">
                        {{item.reply_content}}
                      </div>
                      <div class="msg-answer-time">{{item.reply_time}}</div>
                    </div>
                  </div>
                </van-row>
              </van-cell>
            </van-list>
          </template>

          <div v-if="replyCount == 0 && noReplyCount == 0" class="no-interact-info">
            <img class="no-data" :src="require('@/assets/noInteract@2x.png')"/>
          </div>
          <!--待回复>0 且已回复=0 及时回复有助于提高投资者好感哦-->
          <div v-if="replyCount == 0 && noReplyCount > 0" class="no-interact-info">
            <img class="no-data" :src="require('@/assets/gotoReply@2x.png')"/>
          </div>
          <!--
          <van-cell class="msg-list-item">
            <van-row class="msg-person" type="flex" justify="space-between" align="center">
              <van-col span="13" class="msg-name">
                <span class="msg-name-avatar"></span>陈燕
              </van-col>
              <van-col span="6" offset="5" style="text-align:right;">
                <div class="warning-item-time">2018-09-04</div>
              </van-col>
            </van-row>
            <van-row class="msg-ask-item">
              <span class="msg-ask-first">问</span>
              <span class="msg-ask">公司投资对普洛斯以及其它一些投资是怎么体现在公司对财务报表的，公司是通过什么方式持有这些投资股份的，谢谢解答。</span>
            </van-row>
            <van-row class="msg-answer-item">
              <div class="triangle-up"></div>
              <div class="msg-content">
                <div class="msg-answer-item senti-item answer-line">
                  <div class="msg-answer-item-content">
                    尊敬待投资者您好,公司投资对普洛斯对投资方式是能体现对财务报表对。
                  </div>
                  <div class="msg-answer-time">2019-02-14 19:20</div>
                </div>
                <div class="msg-answer-item senti-item answer-line">
                <div class="msg-answer-item-content">
                  尊敬待投资者您好,公司投资对普洛斯对投资方式是能体现对财务报表对。
                </div>
                <div class="msg-answer-time">2019-02-14 19:20</div>
                </div>
              </div>
            </van-row>
          </van-cell>
          -->
          
        </van-tab>
      </van-tabs>
    
  </div>

</template>

<script>
import Vue from 'vue';
import { Cell, Row, Col, Tab, Tabs, List } from 'vant';
import { getInteractiveList, getInteractiveStatistic} from '@/api/warning';

Vue.use(Cell).use(Row).use(Col).use(Tab).use(Tabs).use(List);
export default {
  name: 'EInteract',
  components: {
  },
  data() { 
    return {
      title: 'E互动',
      active: 0,
      noReplyCount: 0, // 未回复条数
      replyCount: 0, // 已回复条数
      apiType: 'question', // 列表请求类型
      quesLoading: false, // 最新提问
      quesFinished: false, // 最新提问
      quesNo: 1, // 最新提问页码
      quesList: [], // 最新提问
      replyLoading: false,
      replyFinished: false,
      replyNo: 1, // 最新回答页码
      replyList: [], // 最新回答
    };
  },
  mounted() {
    this.$store.commit('set_top_title',this.title);

    getInteractiveStatistic().then((res) => {
      const{question_count, reply_count} = res.data;
      this.noReplyCount = question_count;
      this.replyCount = reply_count;
    })
  },
  methods: {
    changeTab(index) {
      if (index === 0) { // 最新提问
        this.apiType = 'question';
      } else { // 最新回答
        this.apiType = 'reply';
      }
    },
    // 加载最新提问数据
    loadQues() {
      // 异步更新数据
      getInteractiveList({
        // // :'000001',
        api_type: 'question',
        page_num: this.quesNo,
      }).then((res) => {
        // 加载状态结束
        this.quesLoading = false;
        this.quesList = this.quesList.concat(res.data.data_list);
        this.quesNo += 1;
        // console.log('列表数目：', this.quesList.length);
        // 数据全部加载完成
        if (this.quesList.length >= res.data.not_reply_count) {
          this.quesFinished = true;
        }
      }, e => {
        console.log('--出错了：', e);
        this.quesFinished = false;
        this.quesLoading = false;
      });
    },
    // 加载最新回答数据
    loadReply() {
      // 异步更新数据
      getInteractiveList({
        api_type: 'reply',
        page_num: this.replyNo,
      }).then((res) => {
        // 加载状态结束
        this.replyLoading = false;
        this.replyList = this.replyList.concat(res.data.data_list);
        this.replyNo += 1;
        // console.log('length:', this.replyList.length);
        // 数据全部加载完成
        if (this.replyList.length >= res.data.reply_count) {
          this.replyFinished = true;
        }
        console.log("replyList",this.replyList)
      }, e => {
        console.log('--出错了：', e);
        this.replyFinished = true;
        this.replyLoading = false;
      });
    }
  }
};
</script>

<style>
.triangle-up{
  width: 0;
  height: 0;
  border-width: 0 4px 4px 4px;
  border-style: solid;
  border-color: transparent transparent #F3F4F6 transparent;
  position: relative;
  margin-left: 15px;
}

.no-interact-info{
  width: 202px;
  height: 152px;
  margin: 50px auto;
}

.msg-content{
  background: #F3F4F6;
  padding: 0px 16px;
  border-radius: 2px;
}
.msg-person{
  padding: 10px 0;
}

.warning-wrapper .van-tabs__line{
  background-color: #D4B686;
}
.warning-wrapper .van-tab--active{
  color: #D4B686
}
.emsg-num{
  color:#A2A2A2;
  font-size:12px;
  padding: 10px 0;
  text-align: center;
}
.e-interact .msg-list-item{
  padding:0;
}
.msg-ask-item{
  text-align: left;
}
.recent-ques .msg-ask-item{
  padding-bottom: 14px;
}
.msg-ask-first{
  vertical-align: middle;
  line-height: 12px;
  margin-right: 6px;
  padding: 0px 8px;
  font-size: 12px;
  border-radius: 9px;
  color: #fff;
  background: #D4B686;
}
.msg-name-avatar{
  margin-right: 12px;
  vertical-align: middle;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #DADCE1;
  border-radius: 50%;
}
.msg-name{
  font-size:13px;
  color: #222222;
}
.msg-ask{
    vertical-align: middle;
    color: #222222;
    font-weight: bold;
    font-size: 15px;
    line-height: 15px;
}
.msg-answer-item{
  text-align: left;
  position: relative;
  padding: 10px 0;
}
.e-interact .van-cell:not(:last-child)::after{
  left:0;
}
.e-interact .has-line:after{
  border-bottom: 1px solid #3B3D4F;
}
.e-interact .answer-line:after{
  border-bottom: 1px solid #D8DBE2;
}

.msg-answer-item-content{
  line-height: 20px;
  font-size: 13px;
  color:#222222;
}
.msg-answer-time {
  color: #757679;
  font-size: 12px;
  padding-top: 3px;
}
</style>